<template>
    <el-dialog title="过滤" :visible.sync="filVisible" width="60%" :before-close="handleClose">
        <el-dialog title="保存" :visible.sync="Visible" width="30%" :before-close="handleClose" :modal="false">
            <div>
                <el-form :model="form">
                    <el-form-item label="方案名" label-width="80px">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="not">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <div class="Fil_warp">
            <div class="warp_lef">
                <ul class="Wl_top">
                    <li @click="seve">保存</li>
                    <li @click="Delete">删除</li>
                    <li>按钮</li>
                    <li>按钮</li>
                </ul>
                <ul class="Wl_Box">
                    <li v-for="(item, index) in scheme" :key="index" :class="item.bool ? 'active' : ''" @click="Clickscheme(item)">
                        <p class="cir"></p>
                        <p>{{ item.name }}</p>
                    </li>
                </ul>
            </div>
            <div class="warp_rig">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="条件" name="condition">
                        <div class="condition_Box">
                            <ul class="cond_Box_top">
                                <li>
                                    <el-radio-group v-model="radio">
                                        <el-radio :label="3">按凭证过滤</el-radio>
                                        <el-radio :label="6">按分录过滤</el-radio>
                                    </el-radio-group>
                                </li>
                                <li>
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox label="只看单据头"></el-checkbox>
                                        <el-checkbox label="显示禁用账簿"></el-checkbox>
                                        <el-checkbox label="包括调整期凭证"></el-checkbox>
                                    </el-checkbox-group>
                                </li>
                            </ul>
                            <div class="cond_Box_warp">
                                <ul class="con_btns">
                                    <li @click="addrowFun">新增行</li>
                                    <li>删除行</li>
                                    <li>全部删除</li>
                                    <li>插入行</li>
                                    <li>复制行</li>
                                </ul>
                                <ul class="soma">
                                    <li>字段</li>
                                    <li>比较</li>
                                    <li>值</li>
                                    <li>逻辑</li>
                                </ul>
                                <div class="Soma_Warp_Box">
                                    <ul
                                        class="Soma_Box"
                                        v-for="(item, index) in addrow"
                                        :key="index"
                                        :name="item.num"
                                        @click="ClickAddrowLine(item)"
                                    >
                                        <li>
                                            <p class="san" v-if="item.bool ? 'on' : 'cir'">
                                                <i class="el-icon-caret-right"></i>
                                            </p>
                                            <p class="san_r">
                                                <el-select v-model="fil[item.num]" placeholder="请选择" @change="FilValChange">
                                                    <el-option
                                                        v-for="(v, index) in filterArr"
                                                        :label="v.title"
                                                        :value="v.fieldName"
                                                        :key="index"
                                                    >
                                                    </el-option>
                                                </el-select>
                                            </p>
                                        </li>
                                        <li>
                                            <filconfig :FilConfigobj.sync="FilConfigobj"></filconfig>
                                        </li>
                                        <li>
                                            <filval :FilType.sync="FilType"></filval>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="warp_fot">
                                <div>
                                    <p>过账状态</p>
                                </div>
                                <div>
                                    <p>审核状态</p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="显示隐藏列" name="showOrhidden">定时任务补偿</el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <div>
                <el-checkbox v-model="checked">下次以此次方案进入</el-checkbox>
            </div>
            <div>
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { filterList } from '@/api/index';
import filconfig from './FilConfig';
import filval from './FilVal';
export default {
    name: 'Fil',
    props: ['filVisible'],
    data() {
        return {
            //下次应用此方案进入的复选框
            checked: false,
            //右边的tab切换
            activeName: 'condition',
            //单选框
            radio: '',
            //复选框
            checkList: [],
            //内部的模态框
            Visible: false,
            //内部模态框的v-model
            form: {
                name: ''
            },
            //左侧的保存方案
            scheme: [
                {
                    name: '缺省方案',
                    label: 1,
                    bool: true
                }
            ],
            //添加行
            addrow: [],
            //点击获取此时选中的方案
            schemenum: null,
            //添加行自增的num
            num: 1,
            //获取过滤的list
            filterArr: [],
            //filterArr的v-model
            fil: {},
            //往filconfig中传递的数据
            FilConfigobj: {},
            FilConfigList: [],
            //fil的类型
            FilType: []
        };
    },
    computed: {},
    created() {
        if (JSON.parse(localStorage.getItem('scheme')).length > 1) {
            this.scheme = JSON.parse(localStorage.getItem('scheme'));
        }
    },
    mounted() {
        let tableId = sessionStorage.getItem('tableId');
        filterList(tableId).then(({ data }) => {
            this.filterArr = data.data;
        });
    },
    methods: {
        FilValChange(event) {
            this.filterArr.forEach((v, i) => {
                if (event == v.fieldName) {
                    this.FilConfigobj = v;
                    this.FilConfigList.push(v);
                    this.FilType.push(v.widgetSign);
                }
            });
        },
        //点击添加行的操作
        addrowFun() {
            let rownum = this.num++;
            this.addrow.forEach((v, i) => {
                v.bool = false;
            });
            this.addrow.push({
                num: rownum,
                bool: true
            });
        },
        //点击每行应用的操作
        ClickAddrowLine(item) {
            this.addrow.forEach((v, i) => {
                v.bool = false;
                if (v.num == item.num) {
                    v.bool = true;
                }
            });
            this.FilConfigList.forEach((ev, ei) => {
                if (item.num - 1 == ei) {
                    this.FilConfigobj = ev;
                }
            });
        },
        //点击保存按钮弹出模态框
        seve() {
            this.Visible = true;
        },
        //里层模态框的取消
        not() {
            this.Visible = false;
        },
        //里层模态框的确定
        save() {
            let num = this.scheme.length + 1;
            this.scheme.forEach((v, i) => {
                v.bool = false;
            });
            this.scheme.push({
                name: this.form.name,
                label: num,
                bool: true
            });
            this.Visible = false;
            localStorage.setItem('scheme', JSON.stringify(this.scheme));
        },
        //左侧列表的切换
        Clickscheme(item) {
            this.scheme.forEach((v, i) => {
                v.bool = false;
                if (item.name == v.name) {
                    v.bool = true;
                }
            });
            this.schemenum = item.label;
        },
        //左侧删除按钮
        Delete() {
            // console.log(item);
            let num = this.schemenum - 1;
            if (this.schemenum - 1 == 0) {
                this.$message.error('默认方案不可删除');
            } else {
                this.scheme.splice(num, 1);
                localStorage.setItem('scheme', JSON.stringify(this.scheme));
            }
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleClose() {
            this.$confirm('', {
                title: '提示',
                message: '确认删除？',
                iconClass: 'el-icon-question'
            }).then(() => {
                this.$emit('update:filVisible', false);
            });
        },
        close() {
            this.$emit('update:filVisible', false);
        },
        sure() {
            this.$emit('update:filVisible', false);
        }
    },
    components: {
        filconfig,
        filval
    }
};
</script>
<style lang="less"scoped>
.Fil_warp {
    width: 100%;
    display: flex;
    .warp_lef {
        width: 19.84rem;
        height: 40rem;
        display: flex;
        flex-direction: column;
        .Wl_top {
            width: 100%;
            display: flex;
            background: #8ebcf6;
            color: #fff;
            cursor: pointer;
            li {
                flex: 1;
                text-align: center;
            }
        }
        .Wl_Box {
            flex: 1;
            border: 1px solid #dedede;
            overflow: auto;
            box-sizing: border-box;
            li {
                width: 100%;
                padding: 0 1.34rem;
                box-sizing: border-box;
                cursor: pointer;
                color: #000;
                display: flex;
                align-items: center;

                .cir {
                    width: 0.5rem;
                    height: 0.5rem;
                    border-radius: 50%;
                    background: #46a8fc;
                    line-height: 2.42rem;
                    margin-right: 1.34rem;
                }
            }
            .active {
                background: #9eccf1;
                color: #fff;
            }
            .on {
                display: none;
            }
        }
    }
    .warp_rig {
        flex: 1;
        margin-left: 0.92rem;
        .condition_Box {
            height: 36.5rem;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            .cond_Box_top {
                width: 100%;
                display: flex;
                padding: 1.09rem 1.59rem;
                box-sizing: border-box;
                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    margin-left: 25px;
                }
            }
            .cond_Box_warp {
                flex: 1;
                display: flex;
                flex-direction: column;
                .con_btns {
                    width: 100%;
                    display: flex;
                    background: #e5e5e5;
                    color: #353535;
                    li {
                        cursor: pointer;
                        margin-left: 2.9rem;
                    }
                }
                .Soma_Warp_Box {
                    height: 400px;
                    overflow: auto;
                }
                .soma,
                .Soma_Box {
                    width: 100%;
                    display: flex;
                    line-height: 3rem;
                    background: #8ebcf6;
                    text-align: center;
                    color: #fff;

                    li:nth-child(1) {
                        width: 13.42rem;
                        border-right: 1px solid #fff;
                    }
                    li:nth-child(2) {
                        width: 10rem;
                        border-right: 1px solid #fff;
                    }
                    li:nth-child(3) {
                        width: 15.92rem;
                        border-right: 1px solid #fff;
                    }
                    li:nth-child(4) {
                        width: 15.17rem;
                        border-right: 1px solid #fff;
                    }
                }
                .Soma_Box {
                    line-height: 2rem;
                    cursor: pointer;
                    li {
                        display: flex;
                        align-items: center;
                        .san {
                            width: 2rem;
                            height: 2rem;
                            background: #9eccf1;
                            > i {
                                color: #ffffff;
                            }
                        }
                        .san_r {
                            flex: 1;
                            text-align: center;
                        }
                    }
                }
                .Soma_Box:nth-child(even) {
                    background: #efefef;
                    color: #000;
                }
                .Soma_Box:nth-child(odd) {
                    background: #fff;
                    color: #000;
                }
            }
            .warp_fot {
                width: 100%;
                display: flex;
                padding: 0 3.42rem;
                box-sizing: border-box;
                justify-content: space-between;
            }
        }
    }
}

.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
</style>